<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="98px"
          size="mini"
        >
          <el-form-item label="员工姓名" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入员工姓名"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="员工编号" prop="userNo">
            <el-input
              v-model="queryParams.userNo"
              placeholder="请输入员工编号"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="主管单位" prop="competentOrgList">
             <el-select
              v-model="queryParams.competentOrgList"
              clearable
              multiple
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in competentOrgOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主管部门" prop="deptName">
            <el-input
              v-model="queryParams.deptName"
              placeholder="请输入主管部门"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="在职状态" prop="incumbencyContentList">
            <el-select
              v-model="queryParams.incumbencyContentList"
              multiple
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in jobStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="人员类别" prop="personTypeContentList">
            <el-select
              v-model="queryParams.personTypeContentList"
              multiple
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in peopleTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目负责人" prop="projectLeader">
            <el-input
              v-model="queryParams.projectLeader"
              placeholder="请输入项目负责人"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="门户角色" prop="portalRole">
            <el-select
              v-model="queryParams.portalRole"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in roleOptions"
                :key="dict.roleKey"
                :label="dict.roleName"
                :value="dict.roleKey"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="门户状态" prop="statusList">
            <el-select
              v-model="queryParams.statusList"
              placeholder="门户状态"
              clearable
              multiple
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in portalStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :data="userList"
          :default-sort="{ prop: 'userNo', order: 'ascending' }"
          @sort-change="tableSortChange"
          :cell-style="{
            'font-size': '11px',
            'padding-left': '0px',
            'padding-right': '0px',
          }"
          size="mini"
        >
          <el-table-column
            label="员工姓名"
            align="center"
            prop="nickName"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column
            label="员工编号"
            align="center"
            prop="userNo"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          
          <el-table-column
            label="主管单位"
            align="center"
            prop="competentOrg"
          />
          <el-table-column
            label="主管部门"
            align="center"
            prop="dept.deptName"
          />
          <el-table-column
            label="在职状态"
            align="center"
            prop="incumbencyContent"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
            width="100"
          />
          <el-table-column
            label="人员类别"
            align="center"
            prop="personTypeContent"
            width="100"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column
            label="是否项目负责人"
            align="center"
            prop="judgeProjectLeader"
            width="115"
            :formatter="isProjectLeaderFormatter"
          />
          <el-table-column
            label="项目负责人"
            align="center"
            prop="projectLeader"
            width="120"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column
            label="门户角色"
            align="center"
            prop="portalRole"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column
            label="门户状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />
          <!--
          <el-table-column
            label="OA状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />
          <el-table-column
            label="EC状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />
          <el-table-column
            label="经营状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />
          <el-table-column
            label="领款状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />
          <el-table-column
            label="异常状态"
            align="center"
            prop="status"
            width="75"
            :formatter="userStatusFormatter"
          />-->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                >代持</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="用户基本信息" name="1">
          <el-row>
            <el-col :span="3" class="title-color">员工编号</el-col>
            <el-col :span="5">{{ form.userInfo.userNo }}</el-col>
            <el-col :span="3" class="title-color">员工姓名</el-col>
            <el-col :span="5">{{ form.userInfo.nickName }} </el-col>
            <el-col :span="3" class="title-color">人员类别</el-col>
            <el-col :span="5">{{ form.userInfo.personTypeContent }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">在职状态</el-col>
            <el-col :span="5">{{ form.userInfo.incumbencyContent }} </el-col>
            <el-col :span="3" class="title-color">入职日期</el-col>
            <el-col :span="5">{{ form.userInfo.entryDate }}</el-col>
            <el-col :span="3" class="title-color">离职日期</el-col>
            <el-col :span="5">
              {{ form.userInfo.quitDate }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">员工编号有效性</el-col>
            <el-col :span="5">{{ form.userInfo.isvalidContent }}</el-col>
            <el-col :span="3" class="title-color">人事资料有效期</el-col>
            <el-col :span="5">{{ form.userInfo.dataValid }}</el-col>
            <el-col :span="3" class="title-color">主管单位</el-col>
            <el-col :span="5">{{ form.userInfo.competentOrg }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">所属项目负责人</el-col>
            <el-col :span="5"
              >{{ form.userInfo.projectLeader }}
              <span v-if="form.userInfo.projectLeaderNo">
                ({{ form.userInfo.projectLeaderNo }})</span
              >
            </el-col>
            <el-col :span="3" class="title-color">所属领款经办人</el-col>
            <el-col :span="5"
              >{{ form.userInfo.projectPayeeName }}
              <span v-if="form.userInfo.projectPayee">
                ({{ form.userInfo.projectPayee }})</span
              >
            </el-col>
            <el-col :span="3" class="title-color">主管部门</el-col>
            <el-col :span="5">{{ form.userInfo.dept.deptName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">移动电话(HR)</el-col>
            <el-col :span="5">{{ form.userInfo.hrPhonenumber }}</el-col>
            <el-col :span="3" class="title-color">移动电话(门户)</el-col>
            <el-col :span="5">{{ form.userInfo.phonenumber }}</el-col>
            <el-col :span="3" class="title-color">邮箱(HR)</el-col>
            <el-col :span="5">{{ form.userInfo.email }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">门户状态</el-col>
            <el-col :span="5">
              {{ form.userInfo.status }}
            </el-col>
            <el-col :span="3" class="title-color">门户角色</el-col>
            <el-col :span="5">{{ form.userInfo.portalRole }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="title-color">证件类型</el-col>
            <el-col :span="5">
              {{ form.userInfo.typeContent }}
            </el-col>
            <el-col :span="3" class="title-color">证件号码</el-col>
            <el-col :span="5">{{ form.userInfo.idNum }}</el-col>
          </el-row>
          <el-row>
            <!-- 增加了tips -->
            <el-tooltip class="item" effect="dark" content="请在菜单‘门户用户管理’中修改" placement="right-start">
             <el-col :span="3" class="title-color" style="color: #E6A23C">备注</el-col>
            </el-tooltip>
            <el-col :span="21">
              {{ form.userInfo.remark }}
            </el-col>
          
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="各系统信息" name="2">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="everySystems"
                style="width: 100%; padding-bottom: 10px"
                size="mini"
                class="all-system-table"
              >
              <el-table-column
                    prop="systemName"
                    label="系统名称"
                    :formatter="systemFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="userAccount"
                label="账号"
              >
              </el-table-column>
              <el-table-column
                prop="userStatus"
                label="账号状态"
              >
              </el-table-column>
              <el-table-column
                prop="lastLogonTime"
                label="最后登录时间"
              >
              </el-table-column>
                
              </el-table>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="代持账号信息" name="3">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="holderSystems"
                style="width: 100%; padding-bottom: 10px"
                size="mini"
                class="all-system-table"
              >
                  <el-table-column
                    prop="systemName"
                    label="系统名称"
                    :formatter="systemFormatter"
              >
              </el-table-column>
              <el-table-column
                prop="account"
                label="账号"
              >
              </el-table-column>
              <el-table-column
                prop="userStatus"
                label="账号状态"
              >
              </el-table-column>
              <el-table-column
                prop="lastLogonTime"
                label="最后登录时间"
              >
              </el-table-column>
                
              </el-table>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>

    <!-- 代持信息维护对话框 -->
    <el-dialog
      :title="titleHolder"
      :visible.sync="openHolder"
      width="50%"
      append-to-body
    >
      <el-form
        ref="holderOtherForm"
        :model="holderOtherForm"
        label-width="80px"
      >
        <div>
          <el-button type="primary" @click="addListRow()">添加一行</el-button>
        </div>
        <el-table :data="holderOtherForm" style="width: 100%">
          <el-table-column prop="systemName" label="系统名称" width="160">
            <template slot-scope="scope">
              <span
                style="color: red"
                :hidden="
                  scope.row.systemName != '' &&
                  scope.row.systemName != undefined
                "
                >*</span
              >
              <el-select
                v-model="scope.row.systemName"
                clearable
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in systemOptions"
                  :key="dict.sysNum"
                  :label="dict.sysName"
                  :value="dict.sysNum"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="账号" width="180">
            <template slot-scope="scope">
              <span
                style="color: red"
                :hidden="
                  scope.row.account != '' && scope.row.account != undefined
                "
                >*</span
              >
              <el-input clearable v-model.trim="scope.row.account"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :autosize="{ minRows: 1 }"
                clearable
                v-model="scope.row.remark"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="80" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="
                  deleteListRow(scope.$index, holderOtherForm)
                "
                type="text"
                size="small"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelHolder">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox
            v-model="upload.updateSupport"
          />是否更新已经存在的用户数据
          <el-link type="info" style="font-size: 12px" @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSystemDict,getAllSystemDict } from "@/api/system/sysList";
import {
  listUserNew,
  importTemplate,
  getUserInfoByJobNoOrPhone,
} from "@/api/system/user";
import {
  holderAccountList,
  delHolderAccount,
  addHolderAccount,
} from "@/api/system/unifyUser";
import { optionselect } from "@/api/system/role";

import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  components: { Treeselect },
  data() {
    return {
      nowUserId: "",
      holderOtherForm: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      portalStatusOptions: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      titleHolder: "",
      // 主管部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      openHolder: false,
      // 主管部门名称
      deptName: undefined,
      // 在职状态数据字典
      statusOptions: [
        {
          dictValue: "在岗",
          dictlabel: "在岗",
        },
        {
          dictValue: "离职",
          dictlabel: "离职",
        },
      ],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      competentOrgOptions:[],
      activeNames: ["1"],
      // 表单参数
      form: {
        userInfo: {
          id: undefined,
          userId: undefined,
          deptId: undefined,
          nickName: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: undefined,
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: [],
          dept: {
            deptName: undefined,
          },
        },
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        deptName: undefined,
        incumbencyContent: undefined,
        personTypeContent: undefined,
        projectLeader: undefined,
        portalRole: undefined,
        userNo: undefined,
        incumbencyContentList: undefined,
        statusList:undefined,
        personTypeContentList:undefined,
      },
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        deptId: [
          {
            required: true,
            message: "归属主管部门不能为空",
            trigger: "change",
          },
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
      everySystems: [],
      holderSystems: [],
      

      systemOptions: [],
      allSystemOptions: [],
      holderOtherForm: [],
      errorList: [],
      integList:[],
      jobStatusOptions: [],
      peopleTypeOptions: [],
      roleOptions: [],
      isProjectLeaderOptions: [],
    };
  },
  watch: {
    // 根据名称筛选主管部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getSystemOptions();
    this.getAllSystemOptions();
    this.getList();
    /*this.getDicts("portal_system_type").then((response) => {
      this.systemOptions = response.data;
    });*/

    this.getDicts("sys_user_status").then((response) => {
      this.portalStatusOptions = response.data;
    });

    this.getDicts("portal_job_status").then((response) => {
      this.jobStatusOptions = response.data;
    });

    this.getDicts("portal_people_type").then((response) => {
      this.peopleTypeOptions = response.data;
    });

    this.getDicts("portal_is_project_leader").then((response) => {
      this.isProjectLeaderOptions = response.data;
    });

    this.getDicts("competent_org_options").then((response) => {
      this.competentOrgOptions = response.data;
    });

    this.getRoleOptions();
  },
  methods: {
    isProjectLeaderFormatter(row, column) {
      return this.selectDictLabel(
        this.isProjectLeaderOptions,
        row.judgeProjectLeader
      );
    },
    getRoleOptions() {
      optionselect().then((res) => {
        this.roleOptions = res.data;
      });
    },
    getSystemOptions() {
      getSystemDict().then((res) => {
        this.systemOptions = res.data;
      });
    },
    getAllSystemOptions() {
      getAllSystemDict().then((res) => {
        this.allSystemOptions = res.data;
      });
    },
    userStatusFormatter(row, column) {
      let status = "";
      if (row.status) {
        status = row.status;
      }

      if (row.userStatus) {
        status = row.userStatus;
      }
      var text = "";
      if (status != undefined && status != "") {
        this.portalStatusOptions.forEach((item) => {
          if (item.dictValue === status) {
            text = item.dictLabel;
          }
        });
      }
      return text;
    },
    systemFormatter(row, column) {
      
      let system = "";
      if (row.systemName) {
        system = row.systemName;
      }
      var text = "";
      if (system != undefined && system != "") {
        this.allSystemOptions.forEach((item) => {
          if (item.sysNum === system) {
            text = item.sysName;
          }else if("portal" === system){
            text = "企业综合服务门户";
          }
        });
      }
      return text;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUserNew(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelHolder() {
      this.openHolder = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userInfo: {
          id: undefined,
          userId: undefined,
          deptId: undefined,
          nickName: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: undefined,
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: [],
          dept: {
            deptName: undefined,
          },
        },
      };
      this.everySystems = [];
      this.holderSystems = [];

      this.errorList = [];
      this.integList = [];

      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看详情按钮操作 */
    handleView(row) {
      this.reset();
      this.nowUserId = row.id;
      const reqPamram = {
        id: row.id,
        userNo: row.userNo,
        phonenumber: row.phonenumber,
      };
      getUserInfoByJobNoOrPhone(reqPamram).then((response) => {
        if (response.data && response.data.userInfo) {
          this.portalStatusOptions.forEach((item) => {
            if (item.dictValue === response.data.userInfo.status) {
              response.data.userInfo.status = item.dictLabel;
            }
          });
        }

        this.form = response.data;
        if (response.data) {
          if (response.data.otherSystem) {
            this.everySystems = response.data.otherSystem;
          }

          if (response.data.holderList) {
            this.holderSystems = response.data.holderList;
          }

          if (response.data.errorList) {
            this.errorList = response.data.errorList;
          }

          if (response.data.integList) {
            this.integList = response.data.integList;
          }
        }
        this.getHolderAccountList(reqPamram.id);
        this.open = true;
        this.title = "用户详情";
      });
    },
    handleEdit(row) {
      this.nowUserId = row.id;
      this.getHolderAccountList(row.id);
      this.openHolder = true;
      this.titleHolder = "代持信息维护";
    },
    getHolderAccountList(id) {
      var req = {
        userId: id,
      };
      holderAccountList(req).then((res) => {
        this.holderOtherForm = res.data;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.holderOtherForm && this.holderOtherForm.length > 0) {
        var flag = true;
        this.holderOtherForm.forEach((item) => {
          if (!item.systemName || !item.account) {
            flag = false;
          }
        });
        if (!flag) {
          this.msgError("请填写必填项！");
          return;
        }

        addHolderAccount(JSON.stringify(this.holderOtherForm)).then((res) => {
          if (res.code === 200) {
            this.msgSuccess("保存成功");
            this.openHolder = false;
          } else {
            this.msgError("保存失败");
          }
        });
      } else {
        //删除所有报告类型
        this.reportFunOpen = false;
        if (this.nowUserId) {
          delHolderAccount(this.nowUserId).then((res) => {
            if (res.code === 200) {
              this.msgSuccess("保存成功");
              this.openHolder = false;
            } else {
              this.msgError("保存失败");
            }
          });
        }
      }
      
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    tableSortChange(column) {
      this.queryParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },
    addListRow() {
      this.holderOtherForm.push({
        systemName: undefined,
        account: undefined,
        remark: undefined,
        userId: this.nowUserId,
      });
    },
    deleteListRow(index, rows) {
      rows.splice(index, 1);
    },
  },
};
</script>
<style lang="scss">
.allSystem {
  border-bottom: 1px solid #ccc;
}
.el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
<style lang="scss" >
.all-system-table {
  .el-table__header {
    .is-group {
      th {
        padding: 0;
        height: 10px;
      }
    }
  }

  /*.el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 10px;
  }*/

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 10px;
  }
  .el-table__empty-block {
    display: none;
  }
}
.title-color {
  font-weight: bold;
  color: #303133;
}
</style>